
<template>
  <view>
    <view class="echarts" :prop="option" :change:prop="echarts.update"></view>
  </view>
</template>
 
<script>
export default {
  name: 'Echarts',
  props: {
    option: {
      type: Object,
      required: true
    }
  }
}
</script>
 
<script module="echarts" lang="renderjs">
    export default {
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            if (typeof window.echarts === 'object') {
                this.init()
            } else {
                // 动态引入类库
                const script = document.createElement('script')
                script.src = './static/echarts.min.js'
                // script.src = './static/echarts/echarts.min.js'
                script.onload = this.init
                document.head.appendChild(script)
            }
        },
        methods: {
            /**
             * 初始化echarts
             */
            init() {
                this.chart = echarts.init(this.$el)
                this.update(this.option)
            },
            /**
             * 监测数据更新
             * @param {Object} option
             */
            update(option) {
                if (this.chart) {
                    // 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
                    if (option) {
                        // tooltip
                        if (option.tooltip) {
                            // 判断是否设置tooltip的位置
                            if (option.tooltip.positionStatus) {
                                option.tooltip.position = this.tooltipPosition()
                            }
                            // 判断是否格式化tooltip
                            if (option.tooltip.formatterStatus) {
                                option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
                            }
                        }
                    // 设置新的option
                    this.chart.setOption(option, option.notMerge)
                    }
                    
                }
            },
            /**
             * 设置tooltip的位置，防止超出画布
             */
            tooltipPosition() {
                return (point, params, dom, rect, size) => {
                    //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
                    let x = point[0]
                    let y = point[1]
                    let viewWidth = size.viewSize[0]
                    let viewHeight = size.viewSize[1]
                    let boxWidth = size.contentSize[0]
                    let boxHeight = size.contentSize[1]
                    let posX = 0 //x坐标位置
                    let posY = 0 //y坐标位置
                    if (x < boxWidth) { //左边放不开
                        posX = 5
                    } else { //左边放的下
                        posX = x - boxWidth
                    }
                    if (y < boxHeight) { //上边放不开
                        posY = 5
                    } else { //上边放得下
                        posY = y - boxHeight
                    }
                    return [posX, posY]
                }
            },
            /**
             * tooltip格式化
             * @param {Object} unit 数值后的单位
             * @param {Object} formatFloat2 是否保留两位小数
             * @param {Object} formatThousands 是否添加千分位
             */
            tooltipFormatter(unit, formatFloat2, formatThousands) {
                return params => {
                    let result = ''
                    unit = unit ? unit : ''
                    for (let i in params) {
                        if (i == 0) {
                            result += params[i].axisValueLabel
                        }
                        let value = '--'
                        if (params[i].data !== null) {
                            value = params[i].data
                            // 保留两位小数
                            if (formatFloat2) {
                                value = this.formatFloat2(value)
                            }
                            // 添加千分位
                            if (formatThousands) {
                                value = this.formatThousands(value)
                            }
                        }
                        // #ifdef H5
                        result += '\n' + params[i].seriesName + '：' + value + ' ' + unit
                        // #endif
                        
                        // #ifdef APP-PLUS
                        result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit
                        // #endif
                    }
                    return result
                }
            },
            /**
             * 保留两位小数
             * @param {Object} value
             */
            formatFloat2(value) {
                let temp = Math.round(parseFloat(value) * 100) / 100
                let xsd = temp.toString().split('.')
                if (xsd.length === 1) {
                    temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
                    return temp
                }
                if (xsd.length > 1) {
                    if (xsd[1].length < 2) {
                        temp = temp.toString() + '0'
                    }
                    return temp
                }
            },
            /**
             * 添加千分位
             * @param {Object} value
             */
            formatThousands(value) {
                if (value === undefined || value === null) {
                    value = ''
                }
                if (!isNaN(value)) {
                    value = value + ''
                }
                let re = /\d{1,3}(?=(\d{3})+$)/g
                let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
                    return s1.replace(re, '$&,') + s2
                })
                return n1
            }
        }
    }
</script>
 
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>